import { View } from '@tarojs/components'
import { Space, SpinLoading } from 'antd-mobile'
import React from 'react'
import styles from './index.module.scss'

interface LoadProps {
  text?: string
  size?: number | string
  color?: string
}

// 块内显示的加载
function SpinLoad(props: LoadProps) {
  const { text = '加载中...', size = '32px', color = 'primary' } = props

  return (
    <View className={styles['loading_container']}>
      <Space
        className={styles['load_block']}
        direction='vertical'
        justify='center'
        align='center'
        wrap
        block
        style={{ '--gap': '16px' }}
      >
        <SpinLoading color={color} style={{ '--size': size.toString() }} />
        <View className={styles['load_text']}>{text}</View>
      </Space>
    </View>
  )
}
export default SpinLoad
